<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹力球-漂浮广告</title>
	<style>
		*{padding:0;margin:0;}
		#did{
			width:100px;
			height:100px;
			background-color:pink;
			border-radius:50%;
			position:absolute;
			left:0;
			top:0;
		}
	</style>
</head>
<body>
	<div id="did" ></div>
</body>
	<script>
		did = document.getElementById("did");
		xv = 10;
		yv = 10;
		y = did.offsetTop;
		x = did.offsetLeft;
		mytime = null;

		function demo(){
			if(x<0||x>window.innerWidth-did.offsetWidth){
				xv = -xv;
			}
			if(y<0||y>window.innerHeight-did.offsetHeight){
				yv = -yv;
			}
			x = x+xv;
			y = y+yv;
			did.style.left = x+"px";
			did.style.top = y+"px";
		} 


		mytime = setInterval(demo,100);

		did.onmouseover=function(){
			clearInterval(mytime);
			mytime=null;
		}

		did.onmouseout=function(){
			if(mytime==null){
				mytime=setInterval(demo,100);
			}
		}



	</script>
</html>